<template>
    <div>
        <el-col :span="20" :offset="2">
            <el-card>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/hello' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>帖子</el-breadcrumb-item>
                </el-breadcrumb>
            </el-card>
            <div style="height: 20px;"/>
            <el-card style="border-top: 4px #8eae12 solid">

                <p id="title">{{postsMsg.title}}</p>
                <div style="height: 20px;"/>

                <el-row>
                    <!-- 左侧头像 -->
                    <el-col :span="6" class="rightBorder topBorder bottomBorder" style="height: 300px">
                        <div style="height: 60px;"></div>
                        <div style="height: 80px"><el-avatar :size="70" :src="ico"/></div><br/>
                        <p>{{ userName }}</p><br/>
                    </el-col>
                    <!-- 中间 -->
                    <el-col :span="2" style="height: 300px;" class="topBorder bottomBorder"/>
                    <!--- 右侧内容 -->
                    <el-col :span="16"  class="topBorder bottomBorder" style="height: 300px">
                        <el-col :span="24" style="height: 40px;"/>
                        <p style="text-align: left">{{postsMsg.comment}}</p>
                    </el-col>
                </el-row>
                <div style="height: 15px;"/>
            </el-card>
        </el-col>

        <el-col :span="20" :offset="2">
            <Test v-if="havePower" :postsid="this.id" :userid="this.postsMsg.userId"/>
        </el-col>




    </div>
</template>

<script>
    import Test from "./Test";
    export default {
        components:{
          Test
        },
        name: "Posts",
        created() {
            var myPower = localStorage.getItem('power');
            if(myPower == 0){
                this.havePower = false;
            }
            this.id = this.$route.query.id;
            this.$axios
                .get("/api/posts/getPostsMessageById",{
                    params:{
                        id:this.id
                    }
                })
                .then(req=>{
                    const tmp = req.data.data;
                    this.postsMsg = tmp;
                    // 左侧信息获取
                    this.$axios
                        .get("/api/user/getMessageById",{
                            params:{
                                id:this.postsMsg.userId
                            }
                        })
                        .then(req=>{
                            const tmp = req.data.data;
                            this.userName = tmp.name;
                            if(tmp.ico){
                                this.ico = tmp.ico;
                            }
                            console.log(tmp);
                        });
                });


        },
        data(){
            return{
                havePower:true,
                id:'',
                ico:'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
                userName:'张三',
                postsMsg:{
                    clock: "",
                    comment: "",
                    createTime: "",
                    id: "",
                    plateId: "",
                    start: "",
                    state: "",
                    title: "",
                    top: "",
                    userId: "",
                }

            }
        },
        methods:{
            goHome:function () {
                this.$router.push("/home")
            },
        }
    }
</script>

<style scoped>
    #mainBody{
        background-color: #f7f9fb;
        height: 400px;
        width: 100%;
        border-top: 4px #ae463d solid ;
    }
    #head{
        width: 100%;
        height: 30px;
        background: rgba(167,171,183,0.8);
        position:fixed;
    }
    .c1{
        /*width: 100%;*/
        height: 100px;
        background-color: darkcyan;
    }
    .c2{
        height: 100px;
        background-color: darkgoldenrod;
    }

    #title{
        font-size: 26px;
        text-align: left;
        padding-left: 10px;
    }

    .topBorder{
        border-top: 2px #99acae solid ;
    }
    .bottomBorder{
        border-bottom:2px #99acae solid;
    }
    .leftBorder{
        border-left: 2px #99acae solid;
    }
    .rightBorder{
        border-right: 2px #99acae solid;
    }
</style>
